<template>
  <div class="carousel-wrapper">
    <Swiper :modules="[Autoplay, Pagination]" :autoplay="{ delay: 5000 }" :pagination="{ clickable: true }"
      class="main-carousel">
      <SwiperSlide v-for="(slide, index) in swiperList" :key="index">
        <div class="slide-content">
          <NuxtLink :to="`/party/${activeTab}/${slide.id}`" class="slide-link">
            <img :src="fileBase + slide.image" class="slide-image" />
            <div class="slide-overlay">
              <h3>{{ slide.title }}</h3>
              <!-- <p>{{ slide.description }}</p> -->
            </div>
          </NuxtLink>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
const { fileBase } = useRuntimeConfig().public
console.log(fileBase)
const parps = defineProps({
  swiperList: {
    type: Array,
    required: true
  },
  activeTab: {
    type: String,
    required: true
  }
})
</script>
<style scoped>
.carousel-wrapper {
  position: relative;
  border-radius: 5px;
  overflow: hidden;

  .slide-content {
    position: relative;
    height: 400px;
  }

  .slide-image {
    width: 100%;
    height: 100%;
  }

  .slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    line-height: 3rem;
    text-align: center;

    h3 {
      font-size: 1rem;
      font-weight: normal;
      height: 3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding:0 1rem;
    }
  }

  :deep(.swiper-pagination-bullet) {
    background: #b3a9a9;
    width: .6rem;
    height: .6rem;
    border-radius: 0%;
    opacity: 1;
    margin: 0 .2rem;
  }

  :deep(.swiper-pagination-bullet-active) {
    background: #1867CA;
  }
}

:deep(.swiper-slide) {
  cursor: pointer;
}

:deep(.swiper-pagination) {
  position: absolute;
  bottom: 3.4rem;
  left: auto;
  right: .5rem;
  width: auto;
  text-align: right;
}

@media (max-width: 768px) {
  .carousel-wrapper {
    .slide-content {
      height: 15rem;
    }

    :deep(.swiper-pagination) {
      position: absolute;
      bottom: 3.2rem;
      left: auto;
      right: 0rem;
      width: auto;
      text-align: right;
    }

    .swiper-pagination-bullet-active {
      background: #1867CA;
    }
  }
}
</style>